import React, { useEffect, useRef } from "react";
import styled from "styled-components";
import useReducer from "src/hooks/useReducer";
import {DownOutlined,UpOutlined} from "@ant-design/icons";
const SelectItemStyle = styled.div`
  display: flex;
  padding-bottom: 15px;
  width: 100%;
  .label-title {
    white-space: nowrap;
    padding-right: 20px;
  }
  .option-content {
    overflow: hidden;
    display: flex;
    .option-list {
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      position: relative;
      &.hide {
        height: 26px;
      }
      > div {
        cursor: pointer;
        padding: 2px 10px;
        /* font-size: 1px; */
        &.active {
          color: rgba(14, 73, 126, 1);
          background: rgba(72, 169, 255, 0.15);
          border-radius: 6px ;
        }
      }
    }
  }
  .more {
    /* white-space: nowrap; */
    color: rgba(72, 169, 255, 1);
    padding-left: 30px;
    cursor: pointer;
  }
`;
const SelectItem = (props) => {
  const { label, mode, option = [] ,changeActive} = props;

  const refOption = useRef(null);
  const [state, dispatch] = useReducer({
    isShowMore: false,
    isShow: false,
    selectActive:[],
  });
  const { isShowMore, isShow,selectActive } = state;

  // 判断是否有更多
  const getShowMore = () => {
    const dom = refOption.current.getElementsByClassName("last");
    const bool = dom[0] && dom[0].offsetTop > 0;
    dispatch({
      isShowMore: bool || false,
    });
  };
//  取消，选中
  const getSelectActive = (value) => {
     if(mode  === 'multiple'){
            if(selectActive.includes(value)){
                const arr = selectActive.filter((e) => e !== value);
                changeActive && changeActive(arr,label)
                dispatch({
                    selectActive:arr
                })
            }else {
                selectActive.push(value);
                changeActive && changeActive(selectActive,label)
                dispatch({
                    selectActive:selectActive
                })
            }
     }else{
           if(selectActive.includes(value)){
              changeActive && changeActive(undefined,label)
              dispatch({
                selectActive:[]
              })
           }else {
             changeActive && changeActive([value],label)
              dispatch({
                selectActive:[value]
              })
           }
     }

  }
  useEffect(() => {
    getShowMore();
  }, [option]);
  return (
    <SelectItemStyle>
      <div className="label-title">{label}</div>
      <div className="option-content" ref={refOption}>
        <div className={`option-list ${isShow ? "show" : "hide"} `}>
          {(option || []).map((item, index) => {
            return (
              <div
                key={index}
                className={`${option.length - 1 === index ? "last" : ""} ${selectActive.includes(item.label) ? "active" : ''} `}
                onClick={() => getSelectActive(item.label)}
              >
                {item.label}
              </div>
            );
          })}
        </div>
        {isShowMore && (
          <div className="more" onClick={() => dispatch({ isShow: !isShow })}>
            更多
            <span style={{marginLeft: '10px'}}>{ isShow ? <UpOutlined /> : <DownOutlined />}</span>
          </div>
        )}
      </div>
    </SelectItemStyle>
  );
};
export default SelectItem;
